.form-container {
  background: linear-gradient(to bottom, #f8ddda 0%, #ffffff 25%);
  border-radius: 20rpx;
  margin: 400rpx 30rpx 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.ai-model-container {
  margin-bottom: 20rpx;
  .ai-model-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
  }

  .ai-model-left-image {
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
  }

  .ai-model-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .ai-model-title {
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
    flex: 1;
    margin-bottom: 20rpx;
  }

  .ai-model-desc-wrapper {
    position: relative;
  }

  .ai-model-desc {
    font-size: 28rpx;
    color: #afabab;
    line-height: 1.6;
    margin-bottom: 16rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;

    &:after {
      content: "展开>";
      position: absolute;
      right: 0;
      bottom: 0;
      color: #3d3d3d;
      font-size: 26rpx;
      background-color: #fff;
      padding-left: 10rpx;
    }

    &.expanded {
      -webkit-line-clamp: unset;

      &:after {
        content: "收起<";
      }
    }
  }

  .ai-model-tips {
    margin: 16rpx 0;
  }

  .tip-badge {
    display: flex;
    align-items: flex-start;
  }

  .tip-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }

  .marquee-container {
    overflow: hidden;
    width: 90%;
    position: relative;
  }

  .tip-text.marquee {
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .tip-badge .tip-text {
    font-size: 13px;
    color: #edccb0;
    line-height: 1.4;
    flex: 1;
  }
}

/* 表单布局样式 */
.form-item-inline {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin-bottom: 20rpx;
  justify-content: space-around;

  .form-label {
    width: 25%;
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
  }

  .form-content {
    width: 65%;
  }

  .form-input {
    width: 100%;
    height: 80rpx;
    border: 1px solid #ddd;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
  }
  .birth-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70rpx;
  }
  .placeholder {
    color: #999;
  }
}

.gender-select {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.gender-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 40rpx;
}

.radio-button {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
  position: relative;
}

.radio-button.active {
  border-color: #4caf50;
  background-color: #4caf50;

  /* 添加勾选图标 */
  &:before {
    content: "";
    position: absolute;
    width: 16rpx;
    height: 8rpx;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
    top: 10rpx;
    left: 8rpx;
  }
}

.preview-container {
  background: linear-gradient(to bottom, #ffe9e6 0%, #fff 15%);
  border-radius: 20rpx;
  margin: 0 30rpx 30rpx;
  padding: 0 30rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.tip-text {
  font-size: 28rpx;
  color: #dd302c;
}

/* 问题图片样式 */
.q1,
.q2,
.q3,
.q4,
.q5,
.q6 {
  background-color: #fdf5f5;
  background-image: linear-gradient(to bottom, #fdf5f5, #f8e0df);
}

// 添加新的部分标题样式
.section-title {
  display: flex;
  align-items: center;
  margin: 30rpx 0 20rpx;
  background: linear-gradient(to right, #f8ddda, #ffffff);
  height: 66rpx;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background-color: #dd302c;
    border-radius: 1px;
  }
  .section-title-bar {
    display: none; // 隐藏原来的标题bar
  }

  .section-title-text {
    font-size: 32rpx;
    color: #60392e;
    font-weight: bold;

    padding-left: 20rpx;
  }
}

// 测算类别网格
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin: 20rpx 0 30rpx;

  .category-item {
    display: flex;
    align-items: center;
    background-color: #fdf2e5;
    border-radius: 10rpx;
    padding: 15rpx 20rpx;
    position: relative;
    overflow: hidden;
    width: 90%;
  }

  .category-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 50rpx;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 245, 245, 0),
      rgba(255, 245, 245, 1)
    );
  }

  .category-title {
    font-size: 28rpx;
    color: #60392e;
    font-weight: bold;
  }
}

// 分析列表样式
.analysis-list {
  margin: 10rpx 0 30rpx;

  .analysis-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15rpx;

    .bullet-point {
      width: 16rpx;
      height: 16rpx;
      background-color: #dd302c;
      border-radius: 50%;
      margin-top: 12rpx;
      margin-right: 15rpx;
      flex-shrink: 0;
    }

    .analysis-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
    }
  }
}

/* 确保预览内容有正确的样式 */
.preview-content {
  display: flex;
  justify-content: center;
  margin: 20rpx 0;

  .preview-image {
    width: 100%;
    border-radius: 10rpx;
  }
}
/* 添加新的banner标题样式 */
.banner-title {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0 30rpx;
  position: relative;

  .banner-title-text {
    font-size: 32rpx;
    color: #60392e;
    font-weight: bold;
    text-align: center;
    padding: 0 40rpx;
  }
}

.fixed-bottom-btn {
  position: fixed;
  left: 50%;
  bottom: 30rpx;
  transform: translateX(-50%);
  width: 80%;
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  background: #dd302c;
  border-radius: 48rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  text-shadow: 0 1px 0 rgba(248, 3, 3, 0.5);

  &:active {
    transform: translateX(-50%) scale(0.98);
    background: #f7dbb5;
  }
}
